<template>
  <div class="article-statistics">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>文章统计</span>
          <el-select v-model="timeRange" placeholder="选择时间范围" @change="fetchData">
            <el-option label="近7天" value="7" />
            <el-option label="近15天" value="15" />
            <el-option label="近30天" value="30" />
          </el-select>
        </div>
      </template>
      
      <div class="chart-container">
        <div ref="lineChart" class="chart-item"></div>
        <div ref="pieChart" class="chart-item"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const timeRange = ref('7');
const lineChart = ref(null);
const pieChart = ref(null);

// 模拟数据
const mockData = {
  '7': {
    dates: ['2023-06-01', '2023-06-02', '2023-06-03', '2023-06-04', '2023-06-05', '2023-06-06', '2023-06-07'],
    total: [10, 15, 18, 20, 25, 28, 30],
    new: [2, 5, 3, 5, 3, 2, 5],
    categories: [
      { value: 12, name: '技术' },
      { value: 8, name: '生活' },
      { value: 10, name: '旅行' }
    ]
  },
  '15': {
    dates: ['2023-05-23', '2023-05-24', '2023-05-25', '2023-05-26', '2023-05-27', '2023-05-28', '2023-05-29', '2023-05-30', '2023-05-31', '2023-06-01', '2023-06-02', '2023-06-03', '2023-06-04', '2023-06-05', '2023-06-06'],
    total: [5, 7, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30],
    new: [2, 2, 1, 2, 2, 2, 1, 1, 2, 2, 2, 2, 2, 2, 2],
    categories: [
      { value: 15, name: '技术' },
      { value: 10, name: '生活' },
      { value: 5, name: '旅行' }
    ]
  },
  '30': {
    dates: ['2023-05-08', '2023-05-09', '2023-05-10', '2023-05-11', '2023-05-12', '2023-05-13', '2023-05-14', '2023-05-15', '2023-05-16', '2023-05-17', '2023-05-18', '2023-05-19', '2023-05-20', '2023-05-21', '2023-05-22', '2023-05-23', '2023-05-24', '2023-05-25', '2023-05-26', '2023-05-27', '2023-05-28', '2023-05-29', '2023-05-30', '2023-05-31', '2023-06-01', '2023-06-02', '2023-06-03', '2023-06-04', '2023-06-05', '2023-06-06'],
    total: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
    new: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    categories: [
      { value: 20, name: '技术' },
      { value: 8, name: '生活' },
      { value: 3, name: '旅行' }
    ]
  }
};

import { getArticleStatisticsService, getArticleCategoryStatsService } from '@/api/article';

const loading = ref(false);
const error = ref(null);

// 获取统计数据
const fetchData = async () => {
  try {
    loading.value = true;
    error.value = null;
    
    const [statsRes, categoryRes] = await Promise.all([
      getArticleStatisticsService(timeRange.value),
      getArticleCategoryStatsService(timeRange.value)
    ]);
    
    const data = {
      dates: statsRes.data.dates,
      total: statsRes.data.total,
      new: statsRes.data.new,
      categories: categoryRes.data
    };
    
    // 渲染折线图
    const lineChartInstance = echarts.init(lineChart.value);
    lineChartInstance.setOption({
      title: {
        text: '文章数量统计'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['总文章数', '新增文章数']
      },
      xAxis: {
        type: 'category',
        data: data.dates
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '总文章数',
          type: 'line',
          data: data.total
        },
        {
          name: '新增文章数',
          type: 'line',
          data: data.new
        }
      ]
    });
    
    // 渲染饼图
    const pieChartInstance = echarts.init(pieChart.value);
    pieChartInstance.setOption({
      title: {
        text: '文章分类占比'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '文章分类',
          type: 'pie',
          radius: '50%',
          data: data.categories,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
  } catch (err) {
    error.value = err.message || '获取数据失败';
    console.error('获取统计数据失败:', err);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchData();
  
  // 窗口大小变化时重新渲染图表
  window.addEventListener('resize', () => {
    echarts.getInstanceByDom(lineChart.value)?.resize();
    echarts.getInstanceByDom(pieChart.value)?.resize();
  });
});
</script>

<style scoped>
.article-statistics {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.chart-item {
  flex: 1;
  min-width: 400px;
  height: 400px;
}
</style>